<template>
	<view class="drag-box   ">
		<!-- controlsList 表示控件的列表  controlsSize 表示每个控件的大小 -->
		<drag-and-drop-sort v-if="monted" :controlsList="dataArray" :controlsSize="{width: dragAndDropBoxWidthAndHeight, height: dragAndDropBoxWidthAndHeight}">
			<!-- 自定义内容 -->
			<template #content="{item}">
				<view :style="{'background': item.color}" style="display: flex;flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;border-radius: 15rpx;overflow: hidden;">
					{{item.src?'':item.label}}
					<image :src="item.src" :style="{width: dragAndDropBoxWidthAndHeight+'px', height: dragAndDropBoxWidthAndHeight+'px'}"></image>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</template>
		</drag-and-drop-sort>
	</view>
</template>
 
<script setup>
import { ref,onMounted } from 'vue';
// import dragAndDropSort from './drag-and-drop-sort.vue';
import dragAndDropSort from './drag-and-drop-sort-A.vue';
	const dataArray = [
				{color: '#ee3131', label: '1',src: '/static/icons/1.png',name: '知识问答',navto:'/pages/chat/chat'},
				{color: '#2dc3d5', label: '2',src: '/static/icons/2.png',name: '休闲',navto:'/pages/game/game'},
				{color: '#f5aa41', label: '3',src: '/static/icons/3.png',name: '点餐',navto:'/pages/chat/chat'},
				{color: '#42b983', label: '4',src: '/static/icons/4.png',name: '拖拽',navto:'/pages/chat/chat'},
				{color: '#1983fb', label: '5'},
				{color: '#a15afd', label: '6'},
				{color: '#ffe874', label: '7'},
				{color: '#00a8fb', label: '8'},
				{color: '#f36586', label: '9'},
				{color: '#16d46b', label: '10'},
			]
			const monted = ref(false)
	const dragAndDropBoxWidthAndHeight = ref(100)
	onMounted(()=>{
		uni.getSystemInfo({
			success: function (res) {
				// console.log(res.windowWidth)
				dragAndDropBoxWidthAndHeight.value = (res.windowWidth - 60) / 5
				monted.value = true
			}
		})
		// console.log(拖拽盒宽高.value)
	})
</script>
<style lang="scss">
.drag-box {
	width: 100vw;
	min-height: 100vh;
	.name{
		font-size: 26rpx;
		color: #FFF;
	}
}
</style>